<template>
  <view>
    <navBar :navbarData.sync="navbarData"></navBar>
    <view class="magazine_box" v-show="loadFinish">
      <!-- 饮酒文案 -->
      <view class="details_drinking_tips"></view>
      <!-- 首页箭头 -->
      <uni-transition :duration="500" :mode-class="['fade', 'slide-right']" :styles="indexArrowStyle" :show="showLeftArrow">
        <img style="width:100%;height: auto;" mode="widthFix" src="https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/arrow_left.png" >
      </uni-transition>
      <view v-show="showLeftArrow && shareId == 7" class="index_arrow_bg"></view>
      <!-- 导航icon -->
      <view class="home_icon" :style="showHomeIcon?'opacity:1;z-index:19':'opacity:0;z-index:-19'"
        @click.stop="handleShowNavList(true)">
        <img style="width:100%" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/home_icon.png" >
      </view>
      <scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scrollDomView"
        @scroll="magazineBoxScroll" id="scroll" @scrolltolower="magazineLower"
        style="height:100vh;white-space: nowrap;display:flex;flex-direction:row;align-self:flex-start;justify-self:flex-start;margin-bottom:0;padding-left:0;font-size:0;position: relative;">
        <view class="scroll_item_box" v-for="(item,index) in magazineImgs" :key="index" @touchstart="touchStart">
          <view class="scroll_item_inner" :style="{background: 'url('+item.img+') no-repeat center / 100%'}">
            <img style="width:100%;padding:0;border:0;margin:0;height: auto;opacity:0;" mode="widthFix" :id="item.id"
              :src="item.img" @error="imgLoadFinish" @load="imgLoadFinish">
          </view>
          <!-- 音频按钮 -->
          <view class="musice_btn" v-if="index == 22 && shareId == 2" @click="handlePlay">
            <view style="width: 200rpx;height: 200rpx;">
              <img src="https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/audio.gif"
                style="width:200rpx;height: 200rpx;" mode="widthFix" v-if="showMus">
              <img src="https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/audio.png"
                style="width:200rpx;height: 200rpx;" mode="widthFix" v-else>
            </view>
            <view style="width: 234rpx;height: 62rpx;">
              <image style="width: 100%;"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/audio-text.png"
                mode="widthFix"></image>
            </view>
            <!--音频-->
            <view style="opacity: 0;">
              <audio src="https://100000063-1252208446.file.myqcloud.com/video/2023082579721.mp4 " id="myAudio"
                @play="handlebindPlay" @ended="handlebindEnded"></audio>
            </view>
          </view>
        </view>

      </scroll-view>
      <!-- 阅读更多 -->
      <view class="read_more_btn" :style="showReadMore ? 'opacity:1;z-index:19' : 'opacity:0;z-index:-19'"
        @click.stop="handleToPages()">
        <img src="https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/read_more.png"
          style="width:100%;" mode="widthFix">
      </view>
    </view>
    <uni-transition :duration="500" :mode-class="['fade', 'slide-bottom']" :styles="transfromClass"
      :show="iconShowStatus">
      <view class="arrow_top" :class="iconShowStatus?'':'arrow_to_bottom'" @click.stop="handleShowNavList(false)">
        <img style="width:100%" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/icon_arrow_top.png" alt="" srcset="">
      </view>
      <scroll-view :scroll-x="true"
        style="height:234rpx;white-space: nowrap;display:flex;margin-bottom:0;padding-left:0;">
        <view class="icon_lists" v-for="(item,index) in iconImgLists" :key="index"
          @click.stop="handleNavItemClick(item,index)">
          <img style="width:100%;" mode="widthFix" :src="item.navImg">
        </view>
      </scroll-view>
    </uni-transition>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script>
  import {
    magazineData
  } from "./jsonData.js";
  import NavBar from '@/components/common/navbar';
  import {
    lithLaunch
  } from '@/utils/litha_report';
  export default {
    components: {
      navBar: NavBar
    },
    data() {
      return {
        scrollDomView: "",
        indexArrowStyle: {
          'width': '45rpx',
          'height': '86rpx',
          'position': 'absolute',
          'left': '640rpx',
          'bottom': '305rpx',
          'z-index': 19
        },
        transfromClass: {
          'position': 'absolute',
          'width': '100%',
          'height': '254rpx',
          'background-color': 'rgba(255, 255, 255, 0.9)',
          'left': 0,
          'padding-left': '20rpx',
          'padding-top': '20rpx',
          'z-index': 9,
          'bottom': 0
        },
        iconShowStatus: false, //  控制底部上划列表动画展示
        magazineImgs: [],
        iconImgLists: [],
        // 组件所需的参数
        navbarData: {
          whiteIcon: 1,
          showSearchAndBack: 1,
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          title: '杂志页面', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: true
        },
        showLeftArrow: true,
        showHomeIcon: false,
        showReadMore: false, //  阅读更多
        readMoreLink: "", //  阅读更多跳转链接
        windowWidth: uni.getSystemInfoSync().windowWidth,
        imgLoadNum: 0, //  图片加载数量
        loadFinish: false,
        shareId: '',
        audioCtx: '',
        showMus: false,
        systemInfomations: null,
        trackList: [], //埋点发送
        MagazineDate: '',
        readNum: 0
      }
    },
    onLoad: async function(option) {
      this.systemInfomations = wx.getSystemInfoSync()
      uni.onAppHide(() => {
        this.audioCtx = wx.createAudioContext('myAudio')
        this.audioCtx.pause()
        this.showMus = false
      })

      uni.showLoading({
        title: '加载中'
      });
      this.init(option);
    },
    async onShow() {

    },
    onHide() {
      // 神策埋点
      this.$commonSensors.lithaTrack.cTrack("PageLeave", {
        "page_name": "Magazine内容页",
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Magazine',
        "second_module_name": `VOL${this.shareId}浏览`,
        "view_progress": this.readNum
      })
    },
    onUnload() {
        // 页面销毁时执行
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("PageLeave", {
          "page_name": "Magazine内容页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Magazine',
          "second_module_name": `VOL${this.shareId}浏览`,
          "view_progress": this.readNum
        })
    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      touchStart(){
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("ContentPageOperation", {
          "page_name": "Magazine内容页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Magazine',
          "second_module_name": "点击阅览",
          "operation_type":"滑动"
        })
      },
      lithaTrack(date) {
        let data = {
          path: '/pages/litha-launch/magazine/details?id=' + date,
          pageName: '杂志内页',
          campaign: 'SZSH_LITHA_LAUNCH-2023'
        }
        getApp().cl_tracker.track('mini_program_view', data)
        lithLaunch("mini_program_view", data)
      },
      imgLoadFinish(e) {
        this.imgLoadNum++;
        if (this.imgLoadNum == this.magazineImgs.length) {
          this.loadFinish = true;
          uni.hideLoading();
        }
      },
      /**数据初始化
       * @param {Object} option
       */
      init(option) {
        if (option && option.id) {
          let magObj = magazineData.filter(item => {
            return item.id == parseInt(option.id)
          });
          if (!magObj || !magObj.length) {
            this.handleShowTextToast('未获取到杂志信息');
            uni.reLaunch({
              url: '/pages/litha-magazine/litha-magazine'
            });
            return;
          }
          this.shareId = magObj[0].id || ''
          this.magazineImgs = magObj[0].imgLists || [];
          this.readMoreLink = magObj[0].link || "";
          this.iconImgLists = this.magazineImgs.filter(item => {
            return item.navStatus;
          });
          this.MagazineDate = magObj[0].date
          this.lithaTrack(magObj[0].date)
          // 神策埋点
          this.$commonSensors.lithaTrack.crTrack("ContentPageView", {
            "page_name": "Magazine内容页",
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "first_module_name": 'Magazine',
            "second_module_name": `VOL${this.shareId}浏览`,
          })
        } else {
          this.handleShowTextToast('未获取到杂志信息');
          uni.navigateTo({
            url: '/pages/litha-magazine/litha-magazine'
          });
        }
      },
      /**杂志内容  最后一页点击跳转
       */
      handleToPages() {
        if (this.showReadMore && this.readMoreLink) {
          // 神策埋点
          this.$commonSensors.lithaTrack.cTrack("ContentPageOperation", {
            "page_name": "Magazine内容页",
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "first_module_name": 'Magazine',
            "second_module_name": "点击阅览",
            "operation_type":"点击",
            "button_name":"立即购买"
          })
          uni.reLaunch({
            url: this.readMoreLink
          });
        }
      },
      /**底部导航栏定位图点击
       * @param {Object} item
       */
      handleNavItemClick(item, index) {
        if (item.id == this.scrollDomView) return;
        //  定位锚点赋值
        this.scrollDomView = item.id || "";
        //  收起底部导航
        this.handleShowNavList(false);

        // 96号埋点-邂逅新生-Magazine页-点击杂志菜单缩略图
        const _clId = 'c_ebmp_draco_update_magazine_menu_click_thumbnail';
        const _clParams = {
          campaign: 'SZSH_LITHA_LAUNCH-2023',
          c_event_category_1: 'browse',
          c_event_category_2: 'Magazine',
          c_click_area: '菜单内缩略图' + (index + 1)
        };
        getApp().cl_tracker.track(_clId, _clParams);
        lithLaunch(_clId, _clParams)
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("ContentPageOperation", {
          "page_name": "Magazine内容页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Magazine',
          "second_module_name": "点击阅览",
          "operation_type":"点击",
          "button_name":"菜单缩略图"
        })
      },
      /**杂志页面横屏滚动监听
       * @param {Object} e
       */
      magazineBoxScroll(e) {
        // 图片的位置
        let reading = Math.trunc(e.detail.scrollLeft / this.systemInfomations.windowWidth) + 1
        // 百分比
        let num = e.detail.scrollLeft / (this.systemInfomations.windowWidth * (this.magazineImgs.length - 1))
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": 'Magazine',
          "c_pagename": '杂志' + this.MagazineDate,
          "c_path": '/pages/litha-launch/magazine/details',
          "c_reading_depth": num.toString().indexOf(".") != -1 ? Number(num.toFixed(3)) : num
        }
        wx.reportEvent("c_ebmp_draco_update_magazine_reading_depth", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_magazine_reading_depth', Params)

        let _num2 = num.toString().indexOf(".") != -1 ? Number(num.toFixed(3)) : num;
        if(_num2 > this.readNum){
          this.readNum = _num2 > 1 ? 1 : _num2;
        }
        // if (!this.trackList.includes(reading)) {
        // let num = (reading / this.magazineImgs.length)
        // let aaa =  num.toString().indexOf(".") != -1 ? num.toFixed(3) : num
        // let Params = {
        //   "campaign": 'SZSH_LITHA_LAUNCH-2023',
        //   "c_event_category_1": 'browse',
        //   "c_event_category_2": 'Magazine',
        //   "c_pagename": '杂志' + this.MagazineDate,
        //   "c_path": '/pages/litha-launch/magazine/details',
        //   "c_reading_depth": (reading / this.magazineImgs.length) * 10
        // }
        // wx.reportEvent("c_ebmp_draco_update_invitation_click_pic", {
        //   "eventdata": JSON.stringify(Params)
        // })
        // getApp().commonClTrack('c_ebmp_draco_update_invitation_click_pic', Params)
        // }
        // this.trackList.push(reading)
        // this.trackList = [...new Set(this.trackList)]

        // 导航内容展示
        this.showLeftArrow = e.detail.scrollLeft >= 100 ? false : true;
        // 导航icon展示
        this.showHomeIcon = (e.detail.scrollLeft > 380 && !this.iconShowStatus) ? true : false;
        this.iconShowStatus = (e.detail.scrollLeft <= 100 && this.iconShowStatus) ? false : this.iconShowStatus
        //  更多阅读展示
        let _num = e.detail.scrollWidth - e.detail.scrollLeft - this.windowWidth / 2 <= 300;
        this.showReadMore = (_num && this.readMoreLink) ? true : false;
      },

      magazineLower(e) {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": 'Magazine',
          "c_pagename": '杂志' + this.MagazineDate,
          "c_path": '/pages/litha-launch/magazine/details',
        }
        wx.reportEvent("c_ebmp_draco_update_magazine_finish_reading", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_magazine_finish_reading', Params)
      },
      /**home icon点击展示底部导航定位
       * @param {Object} status true/false
       */
      handleShowNavList(status) {
        this.showHomeIcon = !status;
        this.iconShowStatus = status;
      },

      // 点击音频icon播放
      handlePlay() {
        const _clId = 'c_ebmp_draco_update_magazine_click_multimedia_interaction';
        const _clParams = {
          campaign: 'SZSH_LITHA_LAUNCH-2023',
          c_event_category_1: 'browse',
          c_event_category_2: 'Magazine',
          c_click_area: '230829音频播放按钮'
        };
        getApp().cl_tracker.track(_clId, _clParams);
        wx.reportEvent(_clId, {
          "eventdata": JSON.stringify(_clParams)
        })

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("ContentPageOperation", {
          "page_name": "Magazine内容页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Magazine',
          "second_module_name": "点击阅览",
          "operation_type":"点击",
          "button_name":"点击聆听"
        })

        this.audioCtx = wx.createAudioContext('myAudio')
        this.audioCtx.play()
        this.showMus = true
      },
      handlebindPlay(e) {

      },
      handlebindEnded(e) {
        this.showMus = false;
      },
      onShareAppMessage: async function(res) {
        let that = this;
        let imageUrl = "";
        let title = "";
        let path = '/pages/litha-launch/magazine/details?id=' + that.shareId;
        const magObj = magazineData.find(item => {
          return item.id == parseInt(that.shareId)
        });
        if(magObj && magObj?.share){
          imageUrl = magObj?.share?.img || "";
          title = magObj?.share?.text || "";
        }
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
        let that = this;
        let imageUrl = "";
        let title = "";
        const magObj = magazineData.find(item => {
          return item.id == parseInt(that.shareId)
        });
        if(magObj && magObj?.share){
          imageUrl = magObj?.share?.img || "";
          title = magObj?.share?.text || "";
        }
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return {
          title: title,
          query: 'id=' + that.shareId,
          imageUrl: imageUrl
        };
      },
    }
  }
</script>

<style>
  .video_box {
    width: 100%;
    height: 100vh;
  }

  .magazine_title {
    width: 422rpx;
    height: 65rpx;
    margin: 70rpx auto 49rpx auto;
  }

  .subscribe_btn {
    width: 347rpx;
    height: 74rpx;
    margin: 0 auto 100rpx auto;
  }

  .magazine_box {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .home_icon {
    width: 98rpx;
    height: 98rpx;
    position: absolute;
    left: 50%;
    margin-left: -49rpx;
    bottom: 70rpx;
    z-index: 19;
    transition: all 300ms;
  }

  .scroll_item_box {
    /* min-width: 750rpx; */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    border: 0;
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    position: relative;
  }

  .icon_lists {
    display: inline-block;
    width: 160rpx;
    height: 218rpx;
    overflow: hidden;
    margin-right: 20rpx;
  }

  .arrow_top {
    width: 86rpx;
    height: 45rpx;
    position: absolute;
    left: 50%;
    top: -95rpx;
    margin-left: -43rpx;
  }

  .arrow_to_bottom {
    transform: rotate3d(1, 0, 0, 180deg);
    transition: all 300ms;
  }

  .read_more_btn {
    width: 258rpx;
    height: 76rpx;
    position: absolute;
    left: 50%;
    margin-left: -129rpx;
    bottom: 215rpx;
    z-index: -19;
  }

  .musice_btn {
    /*    width: 224rpx;
    height: 265rpx; */
    position: absolute;
    right: 35%;
    top: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
  }

  .scroll_item_inner {
    /* min-width: 750rpx; */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    border: 0;
    line-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    justify-content: flex-start;
  }

  .index_arrow_bg{
    width: 166rpx;
    height: 166rpx;
    background: url("https://100000063-1252208446.file.myqcloud.com/images/litha/magazine/arrow_bg.png") no-repeat center / 100% 100%;
    position: absolute;
    right: 0;
    bottom: 273rpx;
    z-index:18;
  }
  .details_drinking_tips{
    position:fixed;
    left:0;
    bottom:6%;
    z-index:1;
    width:271rpx;
    height:25rpx;
    background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/yinjiuwenan.png') no-repeat center / 100%;
  }
</style>
